<template>
  <div class="list" v-if="!loading">
    <a-row :gutter="16">
      <a-col
        :xs="24"
        :sm="12"
        :md="12"
        :lg="8"
        v-for="(library, index) in listpage.list"
        :key="index"
      >
        <a-card style="margin-bottom: 16px; background-color: #fafafa;" class="mycard" hoverable>
          <div class="name">{{ library.name }}</div>
          <div class="num">
            <span style="margin-right: 12px">
              试题数量: <span class="numnum">{{ library.questionNum }}</span>
            </span>
            <span style="margin-left: 12px">
              练习数量:
              <span class="numnum" style="color: #18bc37">{{
                library.answered
              }}</span>
            </span>
          </div>
          <div class="myButton">
            <div class="btn check" @click="toExer(library)">参加练习</div>
            <a-popconfirm
              title="确认清除本场练习记录?"
              ok-text="清除"
              cancel-text="取消"
              @confirm="clear(library)"
              ><div class="btn pass del">清除练习</div>
            </a-popconfirm>
          </div>
        </a-card>
      </a-col>
    </a-row>
  </div>
  <a-skeleton active v-else />
  <!-- <el-pagination 
            v-model:current-page="listpage.curPage"
            v-model:page-size="listpage.pageSize" 
            :total="listpage.total" 
            background
            layout="prev, pager, next" 
            :hide-on-single-page="true" 
            @size-change="query"
            @current-change="query"
            @prev-click="query"
            @next-click="query"
        /> -->
</template>
  
<script lang="ts" setup>
import http from "@/request";
import { useDictStore } from "@/stores/dict";
import dayjs from "dayjs";
import { ElMessage } from "element-plus";
import { onMounted, reactive, watch, ref } from "vue";
import { useRouter, useRoute } from "vue-router";
import { noticStore } from "@/stores/notic";

// 定义变量
const noticFn = noticStore();
const route = useRoute();
const router = useRouter();
const loading = ref(false);
const listpage = reactive({
  list: [
    {
      type: 1,
      id: 1,
      name: "单选题",
      questionNum: 0,
    },
    {
      type: 2,
      id: 2,
      name: "多选题",
      questionNum: 0,
    },
    {
      type: 4,
      id: 4,
      name: "判断题",
      questionNum: 0,
    },
  ],
});

// 组件挂载完成后，执行如下方法
onMounted(() => {
  query();
});

// 如果是跳转到列表页，重新查询
watch(
  () => route.path,
  (n, o) => {}
);

// 查询
async function query() {
  loading.value = true;
  const {
    data: { code, data },
  } = await http.post("myExer/myQuestionTypeNum", {});

  if (code !== 200) {
    return;
  }
  data.forEach((item: any) => {
    // 遍历数组，找到对应的type，然后修改对应的questionNum
    const index = listpage.list.findIndex((obj: any) => obj.type === item.type);
    if (index !== -1) {
      listpage.list[index].questionNum = item.questionNum;
    }
  });
  loading.value = false;
  if (noticFn.baseExerInfo.length == 0) {
    let {
      data: { data, code },
    } = await http.post("exmMyExer/get", { type: 2 });
    if (code == 200) {
      try {
        noticFn.baseExerInfo = JSON.parse(data);
      } catch (error) {
        console.error("解析 JSON 数据出错：", error);
        // 在解析失败时进行处理，例如给出错误提示、记录日志等
      }
    }
  }
  //从缓存中查找考试有多少题已答
  if (noticFn.baseExerInfo.length > 0) {
    listpage.list.forEach((item) => {
      item.answered = 0;
      noticFn.baseExerInfo.forEach((item2) => {
        if (item.id == item2.id) {
          item.answered = item2.questions.length ? item2.questions.length : 0;
        }
      });
    });
  } else {
    //所有的answered都设置为0
    listpage.list.forEach((item) => {
      item.answered = 0;
    });
  }
}
const clear = async (exer: any) => {
  noticFn.baseExerInfo = noticFn.baseExerInfo.filter((item) => {
    return item.id != exer.id;
  });
  //listpage.list中 answered重置为0
  listpage.list.forEach((item) => {
    if (item.id == exer.id) {
      item.answered = 0;
    }
  });
  let {
    data: { data, code },
  } = await http.post("exmMyExer/save", {
    type: 2,
    content: JSON.stringify(noticFn.baseExerInfo),
  });
};
// 练习进入
async function toExer(exer: any) {
  router.push(`/myBaseExer/paper/${exer.type}`);
}
</script>

<style lang="scss" scoped>
.list {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  height: calc(100vh - 190px);
  padding-top: 20px;
    background:#F5F5F5;
}
.mycard {
  :deep .ant-card-body {
    display: flex;
    flex-direction: column;
    height: 176px;
    width: 360px;
    text-align: center;
    align-items: center;
  }
  .name {
    font-size: 16px;
    font-weight: 600;
    margin-top: 10px;
  }
  .num {
    font-size: 14px;
    color: #333;
    margin-top: 10px;
  }
  .numnum {
    font-size: 18px;
    color: #46a6ff;
  }
  .myButton {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
  }
  .goto {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
  }
  .btn {
    width: 120px;
    height: 40px;
    line-height: 40px;
    border-radius: 20px;
    background: linear-gradient(to right, #24b0fb, #1c90fa);
    color: #fff;
    font-size: 16px;
    cursor: pointer;
    &:hover {
      background-color: #46a6ff;
    }
  }
  .check {
    margin-right: 8px;
  }
  .pass {
    background: linear-gradient(to right, #32c7cd, #32c7cd);
    &:hover {
      background-color: #32c7cd;
    }
    margin-left: 8px;
  }
}
</style>
  